import React from 'react';

import {WeaUpload,WeaBrowser,WeaHelpfulTip,WeaDialog,WeaLocaleProvider,WeaTools, WeaSearchGroup, WeaFormItem,WeaInput,WeaNewScroll,WeaSelectGroup,WeaTable,WeaInputNumber,WeaColorPicker,WeaSelect,WeaCheckbox} from 'ecCom'
const getLabel = WeaLocaleProvider.getLabel;
import {WeaPortalShare,WeaMaterialLib} from 'weaPortalPublic';
import './style/';
import {Tabs, Button, Spin, Icon, message, Modal} from 'antd';
const TabPane = Tabs.TabPane;
class Setting extends React.Component{


    setConfig = (config)=> {
        let setting = Object.assign(this.props.state.setting, config);
        this.props.setStateData({"setting":setting});
    }

    state={
        selectedRowKeys:"",
        ids:''

    }

    getCols = ()=>{
        let cols = [{
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: "50%",
        },{
            title: getLabel(30585, '操作'),
            key: 'operation',
            width: "50%",
            render: (text, record) => (
                <span>
                    <input type="hidden" name="id" value={record.id}/>
                   <div>
                       {
                           record.parentId == 0 ?(
                                   <span className="esetting-dso-button" onClick={()=>{this.props.setStateData({'addVisiable':true,currentParentId:record.id,setId:-1})}}> 添加</span>
                               ):""
                       }
                        <span className="esetting-dso-button" onClick={()=>{this.props.setStateData({'addVisiable':true,setId:record.id,currentParentId:-1})}}>{getLabel(	30747, '设置')}</span>
                        <span className="esetting-dso-button" onClick={()=>{this.props.delete(record.id)}}>删除</span>
                       {
                           record.firstOrLastSign != -1
                               ?(
                                   <span className="esetting-dso-button" onClick={()=>{this.props.order(record,"1")}}>上移</span>
                               ):""
                       }
                       {
                           record.firstOrLastSign != 1
                               ?(
                                   <span className="esetting-dso-button" onClick={()=>{this.props.order(record,"2")}}>下移</span>
                               ):""
                       }

                   </div>
                </span>
            )
        }]
        return cols;
    }

    getData = (data)=>{

        let realData = []
        for(let i in data){

            if(data[i].child && data[i].child.length >0){
                let child = this.getData(data[i].child)

                let firstOrLastSign = 0
                if(i == 0 ){
                    firstOrLastSign = -1
                }else if(i == data.length-1){
                    firstOrLastSign = 1
                }
                realData.push({
                    key:data[i].id,
                    index:parseInt(i),
                    id: data[i].id,
                    name: data[i].name,
                    parentId:data[i].parentId,
                    orderIndex:data[i].orderIndex,
                    child: child,
                    firstOrLastSign:firstOrLastSign
                })
            }else {
                let firstOrLastSign = 0
                if(i == 0 ){
                    firstOrLastSign = -1
                }else if(i == data.length-1){
                    firstOrLastSign = 1
                }
                realData.push({
                    key:data[i].id,
                    index:parseInt(i),
                    id: data[i].id,
                    name: data[i].name,
                    parentId:data[i].parentId,
                    orderIndex:data[i].orderIndex,
                    firstOrLastSign:firstOrLastSign
                })
            }

        }
        return realData
    }

    onSelectChange = (selectedRowKeys)=>{
        let ids = ""
        for(let i in selectedRowKeys){
            ids +=","+selectedRowKeys[i]
        }
        if(ids){
            ids = ids.substring(1)
        }
        this.setState({
            ids:ids,
            selectedRowKeys:selectedRowKeys
        })
    }

    render (){
        const menuSizeOptions = [
            {
                key: "1",
                selected: true,
                showname: "固定像素",
            },{
                key: "2",
                showname: "百分比",
            },
        ]

        const rowSelection = {
            selectedRowKeys : this.state.selectedRowKeys,
            onChange: this.onSelectChange,
            getCheckboxProps: (record)=>{
                return {
                    disabled: (record.createBySystem == 1 && this.props.container.isSystem==0)    // 配置无法勾选的列
                };
            }
        };
        return (
            <WeaDialog
                title="设置"
                visible={this.props.state.settingVisiable}
                iconBgcolor='#1a57a0'
                hasScroll={false}
                style={{width: 900,height : 500}}
                onCancel={()=>{this.props.cancelAndReflush()}}
            >
                <Spin spinning={false}>
                    <Tabs defaultActiveKey="1" className="portal-esetting-tabs" onChange={()=>{}}>
                        <TabPane tab={getLabel(33368, '内容')} key="1">
                            <WeaSearchGroup title={getLabel(20885, '内容来源')} needTigger={true} showGroup={true} customComponent={
                                <div>
                                    <Button type="primary" className="portal-esetting-wsg-btn" onClick={()=>{this.props.setStateData({'addVisiable':true,currentParentId:0,setId:-1})}} >
                                        添加
                                    </Button>
                                    {
                                        this.state.selectedRowKeys.length >0
                                            ?  (
                                                    <Button type={"primary"} className="lr_managerSetting_center_delete_button"  onClick={() => {this.props.delete(this.state.ids)}} >批量删除</Button>
                                                )
                                            :   (
                                                    <Button type={"ghost"} className="lr_managerSetting_center_delete_button"  >批量删除</Button>
                                                 )
                                    }
                                </div>


                            }>
                                <WeaNewScroll
                                    height={300}
                                    onScroll={(e)=>{

                                    }}>
                                    <WeaTable rowSelection={rowSelection}  columns={this.getCols()} dataSource={this.getData(this.props.state.data)}  pagination={false} childrenColumnName="child"/>

                                </WeaNewScroll>
                            </WeaSearchGroup>
                        </TabPane>
                        <TabPane tab="样式" key="2">
                            <WeaSearchGroup title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                                <div className="lr_managerSetting_style_base_div">
                                    <WeaFormItem label="标题样式" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                        <span>字体大小:</span>
                                        <div className="lr_managerSetting_style_base_input">
                                            <WeaInputNumber
                                                value = {this.props.state.setting.fontSize}
                                                onChange = {(value)=>{this.setConfig({"fontSize":value})}}
                                            />
                                        </div>
                                        <span>字体颜色:</span>
                                        <div className="lr_managerSetting_style_base_input_middle" >
                                            <WeaColorPicker
                                                value={this.props.state.setting.fontColor}
                                                onChange={(v)=> {this.setConfig({"fontColor":v})}}
                                            />
                                        </div>
                                    </WeaFormItem>
                                    <WeaFormItem label="菜单样式" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                        <span>字体大小:</span>
                                        <div className="lr_managerSetting_style_base_input">
                                            <WeaInputNumber
                                                value = {this.props.state.setting.fontSize2}
                                                onChange = {(value)=>{this.setConfig({"fontSize2":value})}}
                                            />
                                        </div>
                                        <span>字体颜色:</span>
                                        <div className="lr_managerSetting_style_base_input_middle" >
                                            <WeaColorPicker
                                                value={this.props.state.setting.fontColor2}
                                                onChange={(v)=> {this.setConfig({"fontColor2":v})}}
                                            />
                                        </div>
                                    </WeaFormItem>

                                    <WeaFormItem label="边距" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                        <span>左右边距:</span>
                                        <div className="lr_managerSetting_style_base_input">
                                            <WeaInputNumber
                                                value = {this.props.state.setting.marginLR}
                                                onChange = {(value)=>{this.setConfig({marginLR:value})}}
                                            />
                                        </div>
                                        <span>上下边距:</span>
                                        <div className="lr_managerSetting_style_base_input" >
                                            <WeaInputNumber
                                                value = {this.props.state.setting.marginTB}
                                                onChange = {(value)=>{this.setConfig({marginTB:value})}}
                                            />
                                        </div>
                                    </WeaFormItem>
                                    <WeaFormItem label="间距" labelCol={{span: 6}} wrapperCol={{span: 18}}>
                                        <span>左右间距:</span>
                                        <div className="lr_managerSetting_style_base_input" >
                                            <WeaInputNumber
                                                value = {this.props.state.setting.spaceingLR}
                                                onChange = {(value)=>{this.setConfig({spaceingLR:value})}}
                                            />
                                        </div>
                                        <span>上下间距:</span>
                                        <div className="lr_managerSetting_style_base_input" >
                                            <WeaInputNumber
                                                value = {this.props.state.setting.spaceingTB}
                                                onChange = {(value)=>{this.setConfig({spaceingTB:value})}}
                                            />
                                        </div>
                                    </WeaFormItem>
                                    <WeaFormItem label={getLabel(2077,"背景颜色")} labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                        <span style={{'vertical-align':'middle'}}>透明:</span>
                                        <div className="lr_addCustomApplication_bgc_div_checkbox_middle" >
                                            <WeaCheckbox
                                                value={this.props.state.setting.isOpacityBgc}
                                                onChange={(value) => {
                                                    if (value === "1") {
                                                        this.setConfig({"isOpacityBgc":"1","backGroundColor":""})

                                                    } else {
                                                        this.setConfig({"isOpacityBgc":"0","backGroundColor":"#eeeeee"})
                                                    }
                                                }}
                                            />
                                        </div>
                                        {
                                            this.props.state.setting.isOpacityBgc == "0"?(  <div className="lr_addCustomApplication_bgc_div_colorPicker_middle" >
                                                <WeaColorPicker
                                                    value={this.props.state.setting.backGroundColor}
                                                    onChange={(v)=> this.setConfig({"backGroundColor": v})}
                                                />
                                            </div>):""
                                        }
                                    </WeaFormItem>
                                    <WeaFormItem label="圆角" labelCol={{span: 6}} wrapperCol={{span: 18}} >
                                        <div className="lr_managerSetting_style_base_input2">
                                            <WeaInputNumber
                                                value = {this.props.state.setting.radius}
                                                onChange = {(value)=>{this.setConfig({radius:value})}}
                                            />
                                        </div>

                                    </WeaFormItem>
                                </div>
                            </WeaSearchGroup>
                        </TabPane>
                        <TabPane tab="布局" key="3">
                            <WeaSearchGroup title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true} >
                                <div className="lr_managerSetting_style_base_div">
                                    <WeaFormItem label="组件大小" className="formItemMarginLeft" labelCol={{span: 6}} wrapperCol={{span: 18}}>
                                        <div className="lr_managerSetting_style_base_select" >
                                            <WeaSelect
                                                options={menuSizeOptions}
                                                value={this.props.state.setting.menusSizeType}
                                                onChange={(v, showname)=> {
                                                    if(v == 1){

                                                        this.setConfig({"menusSizeType":v,menusSize:0})

                                                    }else if(v==2){
                                                        this.setConfig({"menusSizeType":v,menusWidth:0,menusHeight:0})
                                                    }
                                                }}
                                            />
                                        </div>
                                        {
                                            this.props.state.setting.menusSizeType==1?(<div className="lr_managerSetting_layout_base_widthheight" >
                                                <span>宽度:</span>
                                                <div className="lr_managerSetting_style_base_input" >
                                                    <WeaInputNumber
                                                        value = {this.props.state.setting.menusWidth}
                                                        onChange = {(value)=>{this.setConfig({"menusWidth":value})}}
                                                    />
                                                </div>
                                                <span>高度:</span>
                                                <div  className="lr_managerSetting_style_base_input" >
                                                    <WeaInputNumber
                                                        value = {this.props.state.setting.menusHeight}
                                                        onChange = {(value)=>{this.setConfig({"menusHeight":value})}}
                                                    />
                                                </div>
                                            </div>):( <div className="lr_managerSetting_layout_base_widthheight" >
                                                <span>宽度:</span>
                                                <div className="lr_managerSetting_style_base_input" >
                                                    <WeaInputNumber
                                                        value = {this.props.state.setting.menusSize}
                                                        onChange = {(value)=>{this.setConfig({"menusSize":value})}}
                                                    />
                                                </div>
                                            </div>)
                                        }
                                    </WeaFormItem>
                                </div>
                            </WeaSearchGroup>
                        </TabPane>
                    </Tabs>
                </Spin>
                <div className="portal-esetting-confirm lr_managerSetting_option_buttons_div" >
                    <Button type="primary" onClick={() => {this.props.updateSetting()}}>{getLabel(30986, '保存')}</Button>
                    <Button type="ghost"  style={{marginLeft: '10px'}} onClick={()=>{this.props.cancelAndReflush()}}>{getLabel(31129, '取消')}</Button>
                </div>
            </WeaDialog>
            )

    }

}
export default Setting